<template>
  <a-input ref="inputEl" @focus="onFocus" class="w-320" placeholder="搜索菜单">
    <template #prefix><SearchOutlined></SearchOutlined></template>
  </a-input>

  <a-modal
    :mask-closable="false"
    wrap-class-name="search-modal"
    :footer="false"
    v-model:open="modal"
  >
    <template #title>
      <a-input
        ref="searchEl"
        v-model:value="keyword"
        size="large"
        placeholder="请输入搜索"
        class="w-full"
      ></a-input>
    </template>

    <div class="h-300 cus-scroll-y pb-5">
      <div
        class="px-20 py-5 cursor-pointer"
        border-b="1px solid light_border"
        un-hover="bg-bg_color"
        v-for="item in filterMenus"
      >
        <div class="flex justify-between items-center" @click="onPath(item.path)">
          <span class="text-16">{{ item.breadcrumb.join(' / ') }}</span>
          <RightOutlined class="color-text_secondary"></RightOutlined>
        </div>
      </div>
      <!--      <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" description="暂无信息"></a-empty>-->
    </div>
  </a-modal>
</template>
<script setup lang="ts">
import { SearchOutlined, RightOutlined } from '@ant-design/icons-vue'
import { usePermissionStore } from '@/store'
import { PermissionDto } from '@/api/permission.ts'
import { useRouter } from 'vue-router'

const router = useRouter()

const modal = ref(false)
const inputEl = ref()
const searchEl = ref()

const keyword = ref('')

const menus = ref<{ breadcrumb: string[]; path: string }[]>([])

const permissionStore = usePermissionStore()

const onFocus = () => {
  inputEl.value.blur()
  modal.value = true
  keyword.value = ''

  nextTick(() => {
    searchEl.value.focus()
  })
}

const filterMenus = computed(() => {
  if (keyword) {
    return menus.value.filter((menu) => {
      return menu.breadcrumb.join().indexOf(keyword.value) > -1
    })
  } else {
    return menus.value
  }
})

const hasVariable = (path: string | null) => {
  return path && path.indexOf('/:') > -1
}

const getBreadcrumb = (permission: PermissionDto) => {
  const breadcrumb: string[] = []
  const getParent = (id: string) => {
    return permissionStore.permissions.find((p) => p.id == id)
  }

  const loop = (item: PermissionDto) => {
    breadcrumb.push(item.name!)
    if (item.parentId) {
      const parent = getParent(item.parentId!)
      if (parent?.parentId) {
        loop(parent)
      } else {
        breadcrumb.push(parent!.name!)
      }
    }
  }

  loop(permission)

  return breadcrumb.reverse()
}

const render = () => {
  const list = permissionStore.permissions.filter((permission) => {
    return permission.type == 'MENU' && !hasVariable(permission.path) && permission.path
  })
  list.forEach((item: PermissionDto) => {
    menus.value.push({
      breadcrumb: getBreadcrumb(item),
      path: item.path!,
    })
  })
}

const onPath = (path: string) => {
  router.push(path)
  modal.value = false
}

onMounted(() => {
  menus.value = []
  render()
})
</script>

<style lang="less">
.search-modal {
  .ant-modal-content {
    padding: 6px 0 0 0;
    .ant-modal-title {
      border-bottom: 1px solid #efefef;
    }
    .ant-modal-close {
      top: 12px;
    }
    .ant-input {
      border: none;
      &:focus {
        box-shadow: none;
      }
    }
  }
}
</style>
